<template>
  <div>
    <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
    <van-search v-model="searchVal" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
    <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
      description="描述文字" v-show="kStatus" />
    <div class="box" v-show="!hisStatus">
      <van-cell-group v-for="item in qsearchApiData">
        <van-cell :title="item.goods_name" />
      </van-cell-group>
    </div>
    <div class="history" v-show="hisStatus">
      <div class="hot">
        <h4>热门搜索</h4>
        <van-tag type="primary" size="large">耐克</van-tag>
        <van-tag type="primary" size="large">华为手机</van-tag>

      </div>
      <div class="his">
        <h4>历史搜索</h4>
        <van-tag type="primary" size="large">自动吸尘器</van-tag>
        <van-tag type="primary" size="large">机器人</van-tag>
        <van-tag type="primary" size="large">微波炉</van-tag>
        <van-tag type="primary" size="large">照片扫描仪</van-tag>
        <van-tag type="primary" size="large">懒人减肥机</van-tag>
      </div>

    </div>

  </div>
</template>


<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api'
const qsearchApiData = ref([])
let searchVal = ref('')
let hisStatus = ref(true)
let kStatus = ref(false)
import _ from 'lodash'
_.debounce(watch(searchVal, (val) => {
  if (val.length == 0) {
    kStatus.value = false
    hisStatus.value = true
  } else {
    hisStatus.value = false
    qsearchApi(val).then(res => {
      console.log('搜索数据', res);
      qsearchApiData.value = res.data.message
      if (res.data.message.length == 0) {
        kStatus.value = true
      } else {
        kStatus.value = false
      }
    })
  }
}), 2000)

</script>

<style lang="scss" scoped>
.history {
  .hot {
    .van-tag {
      margin: 5px;
      padding: 5px 15px;
      border-radius: 30px;
      background-color: lawngreen;
      color: brown;
    }
  }

  .his {
    .van-tag {
      margin: 5px;
      padding: 5px 15px;
      border-radius: 30px;
      background-color: lawngreen;
      color: brown;
    }
  }
}
</style>